import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';
import '../../../core/constants/app_colors.dart';
import '../../../core/constants/app_icons.dart';
import '../../../core/providers/global_state_coordinator.dart';
import '../../home/pages/home_page.dart';
import '../../community/pages/community_page.dart';
import '../../practice/pages/practice_schedule_page.dart';
import '../../profile/pages/user_profile_page.dart';

/// 主页面 - 包含底部导航栏和页面切换
class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void _onTabTapped(int index) {
    if (_currentIndex != index) {
      setState(() {
        _currentIndex = index;
      });
      _pageController.animateToPage(
        index,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    }
  }

  final List<Widget> _pages = const [
    HomePage(),
    CommunityPage(),
    PracticeSchedulePage(),
    UserProfilePage(),
  ];

  final List<Map<String, dynamic>> _bottomBarItems = [
    {'title': 'Home', 'icon': MyIcons.iconHome},
    {'title': 'Community', 'icon': MyIcons.iconCommunity},
    {'title': 'Plan', 'icon': MyIcons.iconPlan},
    {'title': 'My', 'icon': MyIcons.iconMy},
  ];

  @override
  Widget build(BuildContext context) {
    return Consumer<GlobalStateCoordinator>(
      builder: (context, appProvider, child) {
        return Scaffold(
          extendBodyBehindAppBar: true,
          extendBody: true,
          body: PageView(
            controller: _pageController,
            onPageChanged: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            children: _pages,
          ),
          bottomNavigationBar: _buildCustomBottomNavigationBar(),
        );
      },
    );
  }

  Widget _buildCustomBottomNavigationBar() {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/navigate-bg.png'),
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(24.r),
          topRight: Radius.circular(24.r),
        ),
      ),
      child: SafeArea(
        bottom: false,
        child: Container(
          height: 120.h,
          padding: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 20.h),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: List.generate(_bottomBarItems.length, (index) {
              final item = _bottomBarItems[index];
              final isSelected = _currentIndex == index;

              return Expanded(
                child: GestureDetector(
                  onTap: () => _onTabTapped(index),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      AnimatedContainer(
                        duration: const Duration(milliseconds: 200),
                        curve: Curves.easeInOut,
                        width: 42.w,
                        height: 42.w,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color:
                              isSelected
                                  ? AppColors.iconColor
                                  : AppColors.iconYellowColor,
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withValues(alpha: 0.3),
                              blurRadius: 5,
                              offset: const Offset(0, 4),
                              spreadRadius: 1,
                            ),
                          ],
                        ),
                        child: Center(
                          child: Icon(
                            item['icon'],
                            color: Colors.white,
                            size: 24.w,
                            key: ValueKey('${item['title']}_icon'),
                            shadows: const [
                              Shadow(
                                color: Colors.black54,
                                blurRadius: 4,
                                offset: Offset(1, 2),
                              ),
                            ],
                          ),
                        ),
                      ),
                      SizedBox(height: 8.h),
                      AnimatedDefaultTextStyle(
                        duration: const Duration(milliseconds: 200),
                        style: TextStyle(
                          color:
                              isSelected
                                  ? AppColors.iconColor
                                  : AppColors.iconYellowColor,
                          fontSize: isSelected ? 13.sp : 13.sp,
                          fontWeight:
                              isSelected ? FontWeight.w600 : FontWeight.w600,
                          shadows: const [
                            Shadow(
                              color: Colors.black54,
                              blurRadius: 2,
                              offset: Offset(0, 1),
                            ),
                          ],
                        ),
                        child: Text(item['title']),
                      ),
                    ],
                  ),
                ),
              );
            }),
          ),
        ),
      ),
    );
  }
}
